<template>
  <div class="flex_row">
    <!-- <el-select ref="select" :value="value" :multiple="multiple" :clearable="clearable" filterable remote class="flex_cell"
      :remote-method="remoteMethod" :reserve-keyword="true" default-first-option :disabled="disabled"
      :placeholder="$tt('tip_search_customer_code_name')" :loading="loading" v-bind="$attrs" v-on="$listeners"
      @input="input">
      <el-option v-for="item in options" :key="item.customerId" :label="option.label(item)" :value="item[option.value]">
      </el-option>
    </el-select> -->
    <ex_select_auto ref="main" :option="option" filterable remote :remoteQuery="isMainSystem ? 'selectValue' : 'keyword'"
      class="flex_cell" :url="url" :value="value" :placeholder="$tt('tip_search_customer_code_name')"
      :clearable="clearable" :multiple="multiple" :disabled="disabled" v-bind="$attrs" v-on="$listeners" />
    <el-popover width="400" trigger="click" v-if="multiple" ref="PopoverSearch">
      <div>
        <el-input type="textarea" :rows="6" v-model="searchCodes"
          :placeholder="$tt('tip_pleace_input_customer_code_can_enter_or_comma_or_semicolon_split')" />
        <el-button type="primary" icon="el-icon-search" class="mg_t1" @click="searchCustomer">{{
          $tt('label_look_search_customer') }}</el-button>
      </div>
      <el-button slot="reference" icon="el-icon-plus" class="mg_l1"></el-button>
    </el-popover>

  </div>
</template>
<script>

import role_system_mixin from '@/mixin/role_system_mixin';

export default {
  mixins: [role_system_mixin,],

  props: {
    value: null,
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      url: "",
      searchCodes: "",

      option: (item) => ({ label: this.$formatNameCode(item.customerName, item.customerCode), value: item['customerId'] }),
    }
  },
  created() {
    if (this.isMainSystem) {
      this.url = "/ums-api/customer/CustomerCompanyRpc/queryCustomer.json"
    } else if (this.isWmsSystem) {
      this.url = "/wms-api/customer/WarehouseCustomerRefRpc/selectCustomerRefByLike.json"
    } else if (this.isTmsSystem) {
      this.url = "/tms-api/task/TmsBaseAnomalyRpc/getAllCustomer.json"
    }
  },

  methods: {




    searchCustomer() {
      if (!this.searchCodes) {
        return this.$message.error(this.$tt("tip_pleace_input_customer_code_can_enter_or_comma_or_semicolon_split"))
      }
      let data = {}

      data.customerCodes = this.searchCodes.split(/[,、;\s\n]/).filter(it => it)

      let url = ""
      if (this.isMainSystem) {
        url = "/ums-api/customer/CustomerCompanyRpc/queryCustomerByCustomerCodes.json"
      } else if (this.isWmsSystem) {
        url = "/wms-api/customer/WarehouseCustomerRefRpc/selectCustomerRefByCustomerCodes.json"
      }
      if (!url) return
      this.$ajax({
        url,
        type: 'json', loading: true,
        data,
        success: (res) => {
          if (res && res.data && res.data.rows) {
            const ids = res.data.rows.map(it => it['customerId'])
            this.$emit('input', _.union(this.value, ids))
            if (this.$refs.PopoverSearch) {
              this.$refs.PopoverSearch.doClose()
            }
          } else {
            return this.$message.error(this.$tt("tip_not_found_data"))
          }
        },
        failure: () => {
        },
        complete: () => {
        }
      })
    },
  }
}

</script>
